<template>
  <div class="table-rows">
    <ul class="table-rows-list">
      <li v-for="(row, idx) in rows" :key="idx" class="table-rows-item">
        <span class="table-rows-item-label">{{ `第${idx + 1}行高度` }}</span>
        <el-input-number v-model="rows[idx]" size="small" style="width: 100px"></el-input-number>
        <el-button
          circle
          plain
          size="small"
          type="danger"
          icon="el-icon-minus"
          class="col-delete-button"
          @click="deleteRow(row, idx)"
        ></el-button>
      </li>
    </ul>
    <div>
      <el-button link type="primary" @click="addRow"> 增加行 </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableRowSetting',
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object
  },
  data() {
    return {
      showImportDialogFlag: false
    }
  },
  computed: {
    rows() {
      return this.optionModel.rows
    }
  },
  watch: {},
  methods: {
    deleteRow(option, index) {
      if (this.rows.length <= 1) {
        this.$message({
          message: '请至少保留一行'
        })
        return
      }
      this.rows.splice(index, 1)
    },

    addRow() {
      this.rows.push(50)
    }
  }
}
</script>

<style lang="scss" scoped>
.table-rows {
  width: 100%;

  .table-rows-list {
    list-style: none;
    padding-inline-start: 6px;
    padding-left: 6px;

    .table-rows-item {
      color: var(--el-text-color-regular);
      font-size: 11px;

      .table-rows-item-label {
        padding-right: 8px;
      }
    }
  }
}
</style>
